<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-17 18:23:45
 * @LastEditTime: 2022-03-31 10:43:25
-->
<template>
	<div class="oragnInfo">
        <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="loginRules" class="demo-ruleForm" label-width="250px">
            <el-form-item  prop="userName" label="您代表的机构" >
                <el-input v-model="loginForm.loginName" placeholder="企业或机构全称" class="span8"/>
            </el-form-item>
            <el-form-item  prop="password" label="机构社会统一社会信用信息代码">
                <el-input v-model="loginForm.password" type="password" placeholder="企业或机构的法人代码" class="span8"/>
            </el-form-item>
            <el-form-item label="营业执照与授权涵" :hide-required-asterisk="false" prop="temporaryProfile">
                    <el-upload
                        class="upload-zhizhao span8"
                        drag
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        multiple>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            将授权涵文件、营业执照文件拖到此处，或<em>点击上传</em>
                        </div>
                        <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png，且不超过500kb 
                        </div>
                        </template>
                    </el-upload>
			</el-form-item>
            <el-form-item class="span10">
                <el-button type="primary" @click="handleNext"> 下一步 </el-button>
                <el-button @click="$router.back()"  type="default">取消</el-button>
            </el-form-item>
            <el-form-item class="span10">
                <div class="span10 remark">已有账号，<span class="login-remark" @click="handleLogin">登录</span>我的孚星</div>
            </el-form-item>
        </el-form>
	</div>
</template>
<script setup lang="ts">
// import { usersPasswordchange } from '@/ajax/index';
import { response } from '@/types/response';
import { isLoginRegular, isPassRegular } from '@/utils/regularCommon';
import type { ElForm } from 'element-plus';
import md5 from 'md5';
import { ComponentInternalInstance, reactive, ref } from 'vue';

import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
	const proxy = appContext.config.globalProperties;
	type FormInstance = InstanceType<typeof ElForm>;
	// 路由
	const router = useRouter();
	// vuex
	const store = useStore();
	// 登录
	const loginFormRef = ref();
	const loginForm = reactive({
		'userName': ``,
		'password': ``,
        'phone':``,
        'code':``,
	});
    let props = defineProps({
        value:{                            // 父组件v-model绑定的值
            type:String,
        },
    })
    const emit = defineEmits(['selectActiveId']);
 
	const loginRules = {
		'loginName': [
			{
				'required': true,
				'message': `请输入登录名称`,
				'trigger': `blur`
			},
			{ 'required': true, 'validator': isLoginRegular, 'trigger': `blur` }
		],
		'password': [
			{
				'required': true,
				'message': `请输入密码`,
				'trigger': `blur`
			},
			{ 'required': true, 'validator': isPassRegular, 'trigger': `blur` }
		]
	};
	// 登录函数
	const submitForm = (formEl: FormInstance | undefined) => {
		if (!formEl) return;
		formEl.validate(valid => {
			if (valid) {
				const sendData = JSON.parse(JSON.stringify(loginForm));
				sendData.password = md5(sendData.password);
				store
					.dispatch(`user/usersLoginAction`, {
						'grant_type': `password`,
						'username': sendData.loginName,
						'password': sendData.password,
						'scope': `all`,
						'client_id': `se`,
						'client_secret': `5536e62811f95b3e1a5fbede705f5218`
					})
					.then((res: any) => {
						if (res && res.access_token) {
							proxy.removeSession();
							router.go(0);
						}
						// if (res.succ) {
						// 	proxy.removeSession();
						// 	if (res.content.status === 0) {
						// 		router.go(0);
						// 	} else {
						// 		changePassword();
						// 	}
						// }
					});
			}
		});
	};
	// 修改密码弹框
	const formPassRef = ref();
    const showImages = ref(``);
	let formPass = reactive({
		'newpassword': ``,
		'confirmpassword': ``
	});
	const confirmPasswordFilter = (rule: any, value: any, callback: any) => {
		const fromData: any = formPass;
		if (fromData.newpassword && value !== fromData.newpassword) {
			callback(new Error(`两次输入的密码不一致！`));
		} else {
			callback();
		}
	};
	const isPassNoOdePass = (rule: any, value: any, callback: any) => {
		if (value === `123456`) {
			callback(new Error(`不能和初始密码一样！`));
		} else {
			callback();
		}
	};
	const formPassRules = {
		'newpassword': [
			{
				'required': true,
				'message': `请输入密码`,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassNoOdePass,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassRegular,
				'trigger': `blur`
			}
		],
		'confirmpassword': [
			{
				'required': true,
				'message': `请再次输入密码`,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassNoOdePass,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassRegular,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': confirmPasswordFilter,
				'trigger': `blur`
			}
		]
	};
	// 弹框
	const dialogVisible = ref(false);
	const changePassword = () => {
		formPass = {
			'newpassword': ``,
			'confirmpassword': ``
		};
		dialogVisible.value = true;
	};
    //跳转到登录页面
    const handleLogin = () =>{
		router.push(`/login`);
    };
    //跳转到下一步
    const handleNext = ()=>{
        const id = `2`
        emit('selectActiveId', id)
    };

    // 图片上传
	const beforeAvatarUpload = (file: any) => {
		const isJPG = file.type === `image/jpeg` || file.type === `image/png`;
		const isLt10M = file.size / 1024 / 1024 < 2;
		if (!isJPG) {
			proxy.$message.error(`上传头像图片只能是 JPG后者PNG 格式!`);
		}
		if (isJPG && !isLt10M) {
			proxy.$message.error(`上传头像图片大小不能超过 2MB!`);
		}
		return isJPG && isLt10M;
	};
</script>
<style lang="scss" scoped>
	.oragnInfo {
		@extend %relative;
		background-image: url(../assets/images/login-bg.png);
        .remark{
            border-top: 1px solid #E8EAEC;
            padding-top: 8px;
        }
        .login-remark{
            color: $project_them;
            cursor: pointer;
        }
        ::v-deep .el-upload{
            width: 100%;
        }
        ::v-deep .el-upload-dragger{
            background-color: #F3F4F5;
            height: 112px;
            width: 100%;
            border: 0px solid #d9d9d9;
            .el-upload__text{
                margin-top: -20px;
            }
            .el-icon--upload{
                margin: 20px 0 16px;
            }
        }
        .el-icon--upload{
            color: $project_them;
            width: 34px;
            height: 37px;
        }
	}
     
</style>
